
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>我的 - 闲鱼</title>
    <script src="js/bottom-nav-loader.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.4;
        }

        /* 顶部导航栏 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 60px;
            background-color: #fff;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        .top-nav.visible { opacity: 1; }

        .top-nav-left {
            display: flex;
            align-items: center;
        }

        .top-nav-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            margin-right: 12px;
        }

        .top-nav-username {
            font-size: 16px;
            font-weight: 600;
            color: #333;
        }

        .top-nav-right {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .top-nav-icon {
            width: 24px;
            height: 24px;
            position: relative;
        }
        .top-nav-icon1 {
            width: 24px;
            height: 24px;
            position: relative;
            right: 15px;
        }

        /* 主内容区域 */
        .main-content {
            margin-top: 0;
            padding: 0 8px 80px;
        }

        /* 用户信息头部 */
        .user-header {
            padding: 8px 8px 0px;
            color: #333;
        }

        .user-info {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }

        .user-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin-right: 12px;
            border: 3px solid rgba(255,255,255,0.3);
        }

        .user-details {
            flex: 1;
        }

        .username {
            font-size: 18px;
            font-weight: 700;
            display: flex;
            align-items: center;
            margin-bottom: -7px;
            color: #333;

        }

        .username::after {
            content: '';
            margin-left: 4px;
            width: 12px;
            height: 12px;
            background-image: url('image/center/my_coin_arrow.png');
            background-size: contain;
            background-repeat: no-repeat;
            display: inline-block;
        }

        .fish-power {
            font-size: 10px;
            color: #333;
            display: inline-flex;
            align-items: center;
            background-color: #EFEFEF;
            padding: 2px 2px;
            border-radius: 15px;
            margin-top: 10px;
            border: 1px solid #d4edda;
            font-weight: 700;
        }

        .fish-power::after {
            content: '';
            margin-left: 2px;
            width: 8px;
            height: 8px;
            background-image: url('image/center/my_coin_arrow.png');
            background-size: contain;
            background-repeat: no-repeat;
            display: inline-block;
        }

        .header-actions {
            display: flex;
            flex-direction: row;
            gap: 20px;
        }

        .action-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            color: #666;
            position: relative;
            top: 10px;
        }
        .action-item2 {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            color: #666;
            position: relative;
            top: -2px;
        }

        .action-icon {
            width: 24px;
            height: 24px;
            margin-bottom: 4px;
        }
        .action-icon1 {
            width: 24px;
            height: 24px;
            margin-bottom: -10px;
        }

        .action-item:first-child .action-icon {
            width: 20px;
            height: 20px;
        }

        .action-text {
            font-size: 12px;
        }


        /* 会员横幅 */
        .membership-banner {
            background:linear-gradient(to bottom, #C1FCC2, #DCFEE4);
            padding: 15px;
            border-radius: 12px 12px 0 0;
            display: flex;
            margin: 0 0px;
            align-items: center;
            position: relative;
            z-index: 10;
            height: 60px;
            overflow: visible;
        }

        .membership-content {
            flex: 1;
        }

        .membership-title {
            font-size: 18px;
            font-weight: 600;
            color: #2E7D32;
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .membership-title img {
            height: 20px;
        }

        .membership-desc {
            font-size: 11px;
            color: #4CAF50;
            display: flex;
            align-items: center;
        }

        .membership-desc::after {
            content: '';
            margin-left: 2px;
            width: 8px;
            height: 8px;
            background-image: url('image/center/my_coin_arrow.png');
            background-size: contain;
            background-repeat: no-repeat;
            display: inline-block;
            filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
            color: #4CAF50;
        }

        .membership-mascot {
            width: 130px;
            height: 130px;
            object-fit: contain;
            position: relative;
            left: 20px;
        }

        /* 数据统计 */
        .stats-section {
            background: white;
            margin: 0 0px 8px;
            padding: 16px;
            border-radius: 12px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            z-index: 999;
            position: relative;
        }

        /* 上新提示 */
        .tips-section {
            position: absolute;
            top: -10px;
            right: 16px;
            background: white;
            padding: 8px 12px;
            border-radius: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
            gap: 6px;
            z-index: 10;
        }

        .tips-icon {
            width: 16px;
            height: 16px;
        }

        .tips-text {
            font-size: 12px;
            color: #FF6B35;
            font-weight: 500;
        }

        .stat-item {
            text-align: center;
        }

        .stat-number {
            font-size: 20px;
            font-weight: 700;
            color: #333;
            margin-bottom: 4px;
        }

        .stat-label {
            font-size: 12px;
            color: #000;
            font-weight: 700;
        }

        /* TIPS横幅 */
        .tips-banner {
            background: white;
            margin: 8px 0px;
            padding: 10px 16px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            overflow: hidden;
        }

        .tips-tag {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .tips-tag img {
            width: 50px;
            height: 50px;
            object-fit: contain;
            position: relative;
            top: -1em;
        }

        /* 关键词内的TIPS图标样式 */
        .tips-keyword .tips-tag {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .tips-keyword .tips-tag img {
            width: 50px;
            height: 50px;
            object-fit: contain;
            position: relative;
            top: 0.05em;
            left: 1em;
        }

        .tips-text {
            flex: 1;
            font-size: 12px;
            color: #000;
            position: relative;
            left: 35px;
        }

        /* TIPS关键词轮播容器 */
        .tips-keywords-container {
            position: relative;
            flex: 1;
            height: 26px; /* 容器高度 */
            overflow: hidden; /* 防止内容超出容器 */
        }

        .tips-keyword {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            font-size: 12px;
            color: #000;
            line-height: 26px; /* 与容器高度一致 */
            transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
            transform: translateY(100%);
            opacity: 0;
            pointer-events: none;
            display: flex;
            align-items: center;
            height: 26px;
            overflow: hidden; /* 防止子元素超出 */
        }

        .tips-keyword.slide-up {
            transform: translateY(-100%) !important;
            opacity: 0 !important;
        }

        .tips-keyword.slide-down {
            transform: translateY(100%) !important;
            opacity: 0 !important;
        }

        .tips-keyword.active {
            transform: translateY(0) !important;
            opacity: 1 !important;
        }

        /* 关键词内的文字样式 */
        .tips-keyword .tips-text {
            flex: 1;
            font-size: 12px;
            color: #000;
        }

        .tips-arrow {
            width: 16px;
            height: 16px;
        }

        .tips-arrow img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* 淘宝标识 - 跟随关键词一起滚动 */
        .tips-tao-icon {
            height: 20px;
            width: auto;
            margin-left: 5px;
            position: relative;
            z-index: 1;
            pointer-events: none;
        }

        /* 我的交易 */
        .transactions-section {
            background: white;
            margin: 0 0px 8px;
            padding: 16px;
            border-radius: 12px;
        }

        .section-header {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 12px;
            gap: 8px;
        }

        .section-title {
            font-size: 16px;
            font-weight: 700;
            color: #000;
        }

        .section-subtitle {
            font-size: 12px;
            color: #999;
        }

        .transactions-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
        }

        .transaction-item {
            text-align: center;
        }

        .transaction-icon {
            width: 32px;
            height: 32px;
            margin: 0 auto 8px;
        }

        .transaction-label {
            font-size: 12px;
            color: #000;
            font-weight: 700;
        }

        .transaction-count {
            font-size: 14px;
            font-weight: 600;
            color: #333;
        }

        .promotion-btn-container {
            margin-top: 12px;
            text-align: center;
        }

        .promotion-btn {
            background: #FFC107;
            color: #333;
            padding: 10px 20px;
            border-radius: 25px;
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .promotion-btn::after {
            content: '>';
            margin-left: 4px;
        }

        /* 功能快捷方式 */
        .shortcuts-section {
            background: white;
            margin: 0 0px 8px;
            padding: 16px;
            border-radius: 12px;
            position: relative;
            overflow: hidden;
        }

        .shortcuts-container {
            display: flex;
            width: 200%;
            transition: transform 0.3s ease;
        }

        .shortcuts-page {
            width: 50%;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2px;
            flex-shrink: 0;
        }

        .shortcut-item {
            text-align: center;
        }

        .shortcut-icon {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            margin: 0 auto 1px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: white;
            font-weight: 600;
            background: transparent;
        }

        .shortcut-icon img {
            width: 32px;
            height: 32px;
            object-fit: contain;
        }

        .shortcut-icon.super-brighten {
            background: transparent;
        }

        .shortcut-icon.taobao-resale {
            background: transparent;
        }

        .shortcut-icon.borrow-money {
            background: transparent;
        }

        .shortcut-icon.post-center {
            background: transparent;
        }

        .shortcut-label {
            font-size: 12px;
            color: #000;
            font-weight: 700;
        }


        
        /* 翻页指示器 */
        .page-indicators {
            display: flex;
            justify-content: center;
            margin-top: 16px;
        }

        .page-indicator {
            width: 12px;
            height: 2px;
            border-radius: 1.5px;
            background: #ddd;
            cursor: pointer;
            transition: background 0.3s ease;
            margin: 0 1px;
        }

        .page-indicator.active {
            background: #FFC107;
        }

        /* 功能网格 */
        .features-grid {
            margin: 0 8px 8px;
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr;
            gap: 6px;
        }

        .feature-card.large {
            grid-row: span 2;
        }

        .feature-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .feature-image {
            width: 100%;
            height: 100%;
            display: block;
        }

        /* 功能网格2 - 2列布局 */
        .features-grid-2 {
            margin: 0 0px 8px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 6px;
        }

        .action-text{
            position: relative;
            font-size: 0.6rem;
        }
    </style>
</head>
<body>

    <!-- 顶部导航栏 -->
    <div class="top-nav" id="topNav">
        <div class="top-nav-left">
            <img class="top-nav-avatar" src="image/center/default_user_avatar.png" alt="用户头像">
            <span class="top-nav-username">php技术战</span>
        </div>
        <div class="top-nav-right">
            <img class="top-nav-icon1" src="image/center/tubiao2.jpg" alt="帮助与客服">
            <img class="top-nav-icon" src="image/center/fic_navibar_setting@3x.webp" alt="设置">
        </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
        <!-- 用户信息头部 -->
        <div class="user-header">
            <div class="user-info">
                <img class="user-avatar" src="image/center/default_user_avatar.png" alt="用户头像">
                <div class="user-details">
                    <div class="username">php技术战</div>
                    <div class="fish-power">鱼力值690</div>
                </div>
                <div class="header-actions">
                    <a href="#" class="action-item2">
                        <img class="action-icon1" src="image/center/xiaomi.webp" style="width: 50px;height: 50px;" alt="帮助与客服">
                        <span class="action-text">帮助与客服</span>
                    </a>
                    <a href="#" class="action-item">
                        <img class="action-icon" src="image/center/fic_navibar_setting@3x.webp" alt="设置">
                        <span class="action-text">设置</span>
                    </a>
                </div>
            </div>
        </div>

        <!-- 会员横幅 -->
        <div class="membership-banner">
            <div class="membership-content">
                <div class="membership-title">
                    <img src="image/center/闲鱼会员.png" style="background: transparent;" alt="闲鱼会员">
                    <img src="image/center/X6.png" alt="X5">
                </div>
                <div class="membership-desc">记得每日来领经验值,更大权益礼包等你拿</div>
            </div>
            <img class="membership-mascot" src="image/center/小黄鸭.gif" alt="会员吉祥物">
        </div>

        <!-- 数据统计 -->
        <div class="stats-section">
            <div class="stat-item">
                <div class="stat-number">1</div>
                <div class="stat-label">我的收藏</div>
            </div>
            <div class="stat-item">
                <div class="stat-number">63</div>
                <div class="stat-label">历史浏览</div>
            </div>
            <div class="stat-item">
                <div class="stat-number">0</div>
                <div class="stat-label">我的关注</div>
            </div>
            <div class="stat-item">
                <div class="stat-number">0</div>
                <div class="stat-label">红包卡券</div>
            </div>
        </div>

        <!-- TIPS横幅 -->
        <div class="tips-banner">
            <div class="tips-keywords-container" id="tipsKeywordsContainer">
                <div class="tips-keyword">
                    <div class="tips-tag">
                        <img src="image/center/上新.png" alt="上新">
                    </div>
                    <span class="tips-text">淘宝买的宝贝快去看看还值多少钱</span>
                        <img class="tips-tao-icon" src="image/center/aliuser_logo_tao.png" alt="淘"> 
                    <div class="tips-arrow">
                        <img src="image/center/my_coin_arrow.png" style="width: 10px;height: 10px;position: relative;bottom: 3px;left: 5px;" alt="箭头">
                    </div>
                </div>
                <div class="tips-keyword">
                    <div class="tips-tag">
                        <img src="image/center/上新.png" alt="上新">
                    </div>
                    <span class="tips-text">闲鱼买的宝贝快去看看还值多少钱</span>
                        <img class="tips-tao-icon" src="image/center/aliuser_logo_tao.png" alt="淘"> 
                    <div class="tips-arrow">
                        <img src="image/center/my_coin_arrow.png" style="width: 10px;height: 10px;position: relative;bottom: 3px;left: 5px;" alt="箭头">
                    </div>
                </div>
                <div class="tips-keyword">
                    <div class="tips-tag">
                        <img src="image/center/上新.png" alt="上新">
                    </div>
                    <span class="tips-text">Python编程入门教程</span>
                        <img class="tips-tao-icon" src="image/center/aliuser_logo_tao.png" alt="淘"> 
                    <div class="tips-arrow">
                        <img src="image/center/my_coin_arrow.png" style="width: 10px;height: 10px;position: relative;bottom: 3px;left: 5px;" alt="箭头">
                    </div>
                </div>
                <div class="tips-keyword">
                    <div class="tips-tag">
                        <img src="image/center/上新.png" alt="上新">
                    </div>
                    <span class="tips-text">二手显卡超值购买指南</span>
                        <img class="tips-tao-icon" src="image/center/aliuser_logo_tao.png" alt="淘"> 
                    <div class="tips-arrow">
                        <img src="image/center/my_coin_arrow.png" style="width: 10px;height: 10px;position: relative;bottom: 3px;left: 5px;" alt="箭头">
                    </div>
                </div>
                <div class="tips-keyword">
                    <div class="tips-tag">
                        <img src="image/center/上新.png" alt="上新">
                    </div>
                    <span class="tips-text">数据分析实战教程推荐</span>
                        <img class="tips-tao-icon" src="image/center/aliuser_logo_tao.png" alt="淘"> 
                    <div class="tips-arrow">
                        <img src="image/center/my_coin_arrow.png" style="width: 10px;height: 10px;position: relative;bottom: 3px;left: 5px;" alt="箭头">
                    </div>
                </div>
            </div>
        </div>

        <!-- 我的交易 -->
        <div class="transactions-section">
            <div class="section-header">
                <div class="section-title">我的交易</div>
                <div class="section-subtitle">在闲鱼赚了91.48元</div>
            </div>
            <div class="transactions-grid">
                <div class="transaction-item">
                    <img class="transaction-icon" src="image/center/我发布的.png" alt="我发布的">
                    <div class="transaction-label">我发布的22</div>
                </div>
                <div class="transaction-item">
                    <img class="transaction-icon" src="image/center/我卖出的.png" alt="我卖出的">
                    <div class="transaction-label">我卖出的18</div>
                </div>
                <div class="transaction-item">
                    <img class="transaction-icon" src="image/center/我买到的.png" alt="我买到的">
                    <div class="transaction-label">我买到的21</div>
                </div>
                <div class="transaction-item">
                    <img class="transaction-icon" src="image/center/待评价.png" alt="待评价">
                    <div class="transaction-label">待评价</div>
                </div>
            </div>
            <!-- <div class="promotion-btn-container">
                <a href="#" class="promotion-btn">明日擦亮曝光+10</a>
            </div> -->
        </div>

        <!-- 功能快捷方式 -->
        <div class="shortcuts-section">
            <div class="shortcuts-container">
                <!-- 第一页 -->
                <div class="shortcuts-page">
                    <div class="shortcut-item">
                        <div class="shortcut-icon super-brighten">
                            <img src="image/center/超级擦亮.png" alt="超级擦亮">
                        </div>
                        <div class="shortcut-label">超级擦亮</div>
                    </div>
                    <div class="shortcut-item">
                        <div class="shortcut-icon taobao-resale">
                            <img src="image/center/淘宝转卖.png" alt="淘宝转卖">
                        </div>
                        <div class="shortcut-label">淘宝转卖</div>
                    </div>
                    <div class="shortcut-item">
                        <div class="shortcut-icon borrow-money">
                            <img src="image/center/借钱.png" alt="借钱">
                        </div>
                        <div class="shortcut-label">借钱</div>
                    </div>
                    <div class="shortcut-item">
                        <div class="shortcut-icon post-center">
                            <img src="image/center/帖子中心.png" alt="帖子中心">
                        </div>
                        <div class="shortcut-label">帖子中心</div>
                    </div>
                </div>
                <!-- 第二页 -->
                <div class="shortcuts-page">
                    <div class="shortcut-item">
                        <div class="shortcut-icon">
                            <img src="image/center/神奇副业.png" alt="神奇副业">
                        </div>
                        <div class="shortcut-label">神奇副业</div>
                    </div>
                    <div class="shortcut-item">
                        <div class="shortcut-icon">
                            <img src="image/center/闲鱼公约（横）.png" alt="闲鱼公约">
                        </div>
                        <div class="shortcut-label">闲鱼公约</div>
                    </div>
                    <div class="shortcut-item">
                        <div class="shortcut-icon">
                            <img src="image/center/闲鱼体验官.png" alt="闲鱼体验官">
                        </div>
                        <div class="shortcut-label">闲鱼体验官</div>
                    </div>
                    <div class="shortcut-item">
                        <div class="shortcut-icon">
                            <img src="image/center/安全中心.png" alt="安全中心">
                        </div>
                        <div class="shortcut-label">安全中心</div>
                    </div>
                </div>
            </div>
            <!-- 翻页指示器 -->
            <div class="page-indicators">
                <div class="page-indicator active" data-page="0"></div>
                <div class="page-indicator" data-page="1"></div>
            </div>
        </div>

        <!-- 功能网格 -->
        <div class="features-grid">
            <!-- 第一列：闲鱼币（大卡片，跨2行） -->
            <div class="feature-card large" style="position: relative;">
                <img class="feature-image" src="image/center/闲鱼币.gif" alt="闲鱼币">
                <div style="position: absolute; top: 14px; left: 70px; z-index: 10; background: #FB9813; border-radius: 256px; padding: 1px 4px; height: 20px; display: flex; align-items: center;">
                    <img src="image/center/闲鱼币摇头.gif" alt="闲鱼币摇头" style="width: 12px; height: 12px; margin-right: 3px;">
                    <span style="color: #fff; font-size: 12px; font-weight: bold;">612</span>
                    <img src="image/center/my_coin_arrow.png" alt="箭头" style="width: 8px; height: 8px; margin-left: 2px; filter: brightness(0) invert(1);">
                </div>
            </div>
            
            <!-- 第二列：循环商店 -->
            <div class="feature-card">
                <img class="feature-image" src="image/center/循环商店.gif" alt="循环商店">
            </div>
            
            <!-- 第三列：蚂蚁森林 -->
            <div class="feature-card">
                <img class="feature-image" src="image/center/神奇鱼塘.gif" alt="蚂蚁森林">
            </div>
            
            <!-- 第二列：小法庭 -->
            <div class="feature-card">
                <img class="feature-image" src="image/center/小法庭.gif" alt="小法庭">
            </div>
            
            <!-- 第三列：公益宝贝 -->
            <div class="feature-card">
                <img class="feature-image" src="image/center/公益宝贝.gif" alt="公益宝贝">
            </div>
        </div>

        <!-- 功能网格2 - 2列布局 -->
        <div class="features-grid-2">
            <div class="feature-card">
                <img class="feature-image" src="image/center/现金签到.png" alt="现金签到">
            </div>
            <div class="feature-card">
                <img class="feature-image" src="image/center/闲鱼赚钱.png" alt="闲鱼赚钱">
            </div>
            <div class="feature-card">
                <img class="feature-image" src="image/center/皮肤装扮.png" alt="皮肤装扮">
            </div>
            <div class="feature-card">
                <img class="feature-image" src="image/center/闲鱼给物社.png" alt="闲鱼给物社">
            </div>
            <div class="feature-card">
                <img class="feature-image" src="image/center/群推广官.png" alt="群推广官">
            </div>
            <div class="feature-card">
                <img class="feature-image" src="image/center/闲鱼直播.png" alt="闲鱼直播">
            </div>
            <div class="feature-card">
                <img class="feature-image" src="image/center/兴趣圈.png" alt="兴趣圈">
            </div>
            <div class="feature-card">
                <img class="feature-image" src="image/center/闲鱼联盟.png" alt="闲鱼联盟">
            </div>
            <div class="feature-card">
                <img class="feature-image" src="image/center/本机估价.png" alt="本机估价">
            </div>
            <div class="feature-card">
                <img class="feature-image" src="image/center/闲鱼公约.png" alt="闲鱼公约">
            </div>
        </div>
    </div>

    
</body>
    <script>
        // TIPS关键词轮播功能
        function initTipsKeywordsRotation() {
            const container = document.getElementById('tipsKeywordsContainer');
            if (!container) return;
            
            const keywords = container.querySelectorAll('.tips-keyword');
            if (keywords.length === 0) return;
            
            let currentIndex = 0;
            
            // 设置初始状态：所有关键词都隐藏在下方
            keywords.forEach((keyword, index) => {
                keyword.classList.add('slide-down');
                keyword.classList.remove('active', 'slide-up');
            });
            
            // 延迟显示第一个关键词，让它从下方滑动上来
            setTimeout(() => {
                const firstKeyword = keywords[0];
                firstKeyword.classList.remove('slide-down');
                firstKeyword.classList.add('active');
            }, 100);
            
            function rotateKeywords() {
                const currentKeyword = keywords[currentIndex];
                const nextIndex = (currentIndex + 1) % keywords.length;
                const nextKeyword = keywords[nextIndex];
                
                // 当前关键词向上滑动消失
                currentKeyword.classList.remove('active');
                currentKeyword.classList.add('slide-up');
                
                // 下一个关键词从下方滑动上来
                nextKeyword.classList.remove('slide-down');
                nextKeyword.classList.add('active');
                
                // 更新索引
                currentIndex = nextIndex;
                
                // 动画结束后重置slide-up类，为下一次循环做准备
                setTimeout(() => {
                    currentKeyword.classList.remove('slide-up');
                    currentKeyword.classList.add('slide-down'); // 重置为slide-down状态
                }, 500); // 匹配CSS过渡时间
            }
            
            // 2秒后开始第一次轮播
            setInterval(rotateKeywords, 3000);
        }

        // 底部导航切换功能
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化TIPS关键词轮播
            initTipsKeywordsRotation();
        });

        // 顶部导航栏滚动显示功能
        document.addEventListener('DOMContentLoaded', function() {
            const topNav = document.getElementById('topNav');
            let lastScrollTop = 0;

            window.addEventListener('scroll', function() {
                const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
                
                if (scrollTop <= 0.1) {
                    topNav.style.opacity = '0';
                    topNav.classList.add('visible');
                    return;
                }
                const max = 15; // 渐显的阈值区间，可按需调整
                const o = Math.min(1, scrollTop / max);
                topNav.classList.add('visible');
                topNav.style.opacity = String(o);
                
                lastScrollTop = scrollTop;
            });
        });

        // 功能快捷方式翻页功能
        document.addEventListener('DOMContentLoaded', function() {
            const container = document.querySelector('.shortcuts-container');
            const indicators = document.querySelectorAll('.page-indicator');
            let currentPage = 0;

            indicators.forEach((indicator, index) => {
                indicator.addEventListener('click', function() {
                    currentPage = index;
                    updatePage();
                });
            });

            function updatePage() {
                const translateX = -currentPage * 50; // 50% for each page
                container.style.transform = `translateX(${translateX}%)`;
                
                indicators.forEach((indicator, index) => {
                    indicator.classList.toggle('active', index === currentPage);
                });
            }

            // 添加触摸滑动支持
            let startX = 0;
            let isDragging = false;

            container.addEventListener('touchstart', function(e) {
                startX = e.touches[0].clientX;
                isDragging = true;
            });

            container.addEventListener('touchmove', function(e) {
                if (!isDragging) return;
                e.preventDefault();
            });

            container.addEventListener('touchend', function(e) {
                if (!isDragging) return;
                isDragging = false;
                
                const endX = e.changedTouches[0].clientX;
                const diffX = startX - endX;
                
                if (Math.abs(diffX) > 50) { // 滑动距离超过50px才切换
                    if (diffX > 0 && currentPage < 1) {
                        currentPage++;
                    } else if (diffX < 0 && currentPage > 0) {
                        currentPage--;
                    }
                    updatePage();
                }
            });
        });
    </script>
</html>
